<template>
  <div class="order-detail-container">
      <div class="order-section order-base-info">
        <van-skeleton :row="2" :loading="loading">
          <div>订单号：<span class="b-b">{{ order.orderNo }}</span></div>
          <div class="order-price-section">
            <span><small>￥</small>{{ order.total }}</span>
            <span>{{ order.statusCn }}</span>
          </div>
        </van-skeleton>
      </div>
      <div class="order-section order-contact">
        <van-skeleton :row="2" :loading="loading">
          <div class="contact-name">
            {{ contact.name }}
          </div>
          <div class="contact-address">
            {{ contact.area }} {{ contact.address }}
          </div>
        </van-skeleton>
      </div>
      <div class="order-section order-product-list">
        <van-skeleton :row="3" :loading="loading">
          <ProductCell v-for="(prod) in order.products" :product="prod" :key="prod.id"></ProductCell>
        </van-skeleton>
      </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Cell } from 'vant'

import ProductCell from './components/ProductCell'

Vue.use(Cell)

export default {
  name: 'OrderDetail',
  components: {
    ProductCell
  },
  data () {
    return {
      orderId: '',
      order: {},
      loading: false
    }
  },
  computed: {
    contact () {
      return this.order.contact || {}
    }
  },
  created () {
    this.orderId = this.$route.query.id || ''
    this.fetch()
  },
  methods: {
    fetch () {
      this.loading = true

      this.$api.get('/order/detail.action', {
        params: {
          id: this.orderId
        }
      }).then((result) => {
        this.loading = false
        this.order = result
      }).catch((err) => {
        this.loading = false
        this.$toast(err.message)
      })
    }
  }
}
</script>

<style lang="less">
  .radius-box() {
    border-radius: 5px;
    margin: 0 10px;
    background: #fff;
  }

  .order-section {
    .radius-box();

    + .order-section{
      margin-top: 10px;
    }
  }

  .order-detail-container {
    padding-top: 10px;

    .order-base-info {
      padding: 10px;

      .b-b {
        font-weight: bold;
      }
    }

    .order-price-section {
      font-size: 16px;
      color: red;
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
    }

    .order-contact {
      padding: 10px;

      .contact-address {
        margin-top: 10px;
        font-size: 12px;
        color: #666;
      }
    }

    .order-product-list {
      padding: 10px 0;
    }
  }
</style>
